<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端思维转变--从事件驱动到数据驱动 | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/43.0137d03c.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端入门</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>前端深入理解</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-basic/understanding/build-application.html" class="sidebar-link">前端构建大型应用</a></li><li><a href="/front-end-playground/front-end-basic/understanding/component-communication-with-data-model.html" class="sidebar-link">数据抽离与数据管理</a></li><li><a href="/front-end-playground/front-end-basic/understanding/component-with-configuration.html" class="sidebar-link">组件配置化</a></li><li><a href="/front-end-playground/front-end-basic/understanding/component-with-itself.html" class="sidebar-link">一个组件的自我修养</a></li><li><a href="/front-end-playground/front-end-basic/understanding/app-component-isolation.html" class="sidebar-link">页面区块化与应用组件化</a></li><li><a href="/front-end-playground/front-end-basic/understanding/template-engine.html" class="sidebar-link">前端模板引擎</a></li><li><a href="/front-end-playground/front-end-basic/understanding/dialogue-abstraction.html" class="sidebar-link">对话抽象</a></li><li><a href="/front-end-playground/front-end-basic/understanding/data-driven-or-event-driven.html" class="active sidebar-link">前端思维转变--从事件驱动到数据驱动</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/understanding/data-driven-or-event-driven.html#gui-与事件" class="sidebar-link">GUI 与事件</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/understanding/data-driven-or-event-driven.html#事件驱动编程" class="sidebar-link">事件驱动编程</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/understanding/data-driven-or-event-driven.html#事件驱动思维" class="sidebar-link">事件驱动思维</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/understanding/data-driven-or-event-driven.html#何为数据" class="sidebar-link">何为数据</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/understanding/data-driven-or-event-driven.html#事件驱动到数据驱动" class="sidebar-link">事件驱动到数据驱动</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/understanding/data-driven-or-event-driven.html#数据驱动与-mvvm" class="sidebar-link">数据驱动与 mvvm</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>接触过 jQuery 的小伙伴们大概在切换到 mvvm 初总不习惯，需要进行开发思维的转换，从事件驱动的角度出发，到从数据驱动的角度出发，也是不小的挑战。</p> <h1 id="事件驱动"><a href="#事件驱动" aria-hidden="true" class="header-anchor">#</a> 事件驱动</h1> <h2 id="gui-与事件"><a href="#gui-与事件" aria-hidden="true" class="header-anchor">#</a> GUI 与事件</h2> <p>GUI（图形用户界面）与事件驱动的渊源可谓不浅。</p> <p>GUI 应用程序的特点是注重与用户的交互，因此程序的执行取决于与用户的实时交互情况，大部分的程序执行需要等到用户的交互动作发生之后。</p> <p>由于用户的输入频率并不高，若不停轮询获取用户输入，就有点像 ajax 轮询和 websocket 推送的关系：</p> <ol><li>资源利用率低。</li> <li>不能真正做到及时同步。</li></ol> <p><strong>由于 GUI 程序的执行流程由用户控制，并且不可预期，为了适应这种特点，我们需要采用事件驱动的编程方法。普通程序的执行可概括为“启动——做事——终止”，而事件驱动的程序的执行可概括为“启动——事件循环（即等待事件发生并处理之）”。</strong></p> <h2 id="事件驱动编程"><a href="#事件驱动编程" aria-hidden="true" class="header-anchor">#</a> 事件驱动编程</h2> <h3 id="事件"><a href="#事件" aria-hidden="true" class="header-anchor">#</a> 事件</h3> <p>事件是可以被控件识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。</p> <p>事件（event）是针对应用程序所发生的事情，并且应用程序需要对这种事情做出响应。</p> <h3 id="事件处理"><a href="#事件处理" aria-hidden="true" class="header-anchor">#</a> 事件处理</h3> <p>程序对事件的响应其实就是调用预先编制好的代码来对事件进行处理，这种代码称为事件处理程序（event handler）。</p> <p><strong>事件驱动编程（event-driven programming）就是针对这种“程序的执行由事件决定”的应用的一种编程范型。</strong></p> <h3 id="event-loop"><a href="#event-loop" aria-hidden="true" class="header-anchor">#</a> Event loop</h3> <p>主线程从&quot;任务队列&quot;中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为 Event Loop（事件循环）。</p> <p>关于 Javascript 的单线程与 Event Loop，想要了解可以参考<a href="http://www.ruanyifeng.com/blog/2014/10/event-loop.html" target="_blank" rel="noopener noreferrer">《JavaScript 运行机制详解：再谈 Event Loop》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。今天的主角是数据驱动，事件相关的不进行详细说明了。</p> <h2 id="事件驱动思维"><a href="#事件驱动思维" aria-hidden="true" class="header-anchor">#</a> 事件驱动思维</h2> <p>在 GUI 和 Javascript 的设计场景下，我们写代码的时候也会代入这样的思维：</p> <p><strong>用户输入 =&gt; 事件响应 =&gt; 代码运行 =&gt; 刷新页面状态</strong></p> <p>于是乎，刚开始写应用的思路如下：</p> <ol><li>开发静态页面。</li> <li>添加事件监听，包括用户输入、http 请求、定时器触发等事件。</li> <li>针对不同事件，编写不同的处理逻辑，包括获取事件状态/输入、计算并更新状态等。</li> <li>根据计算后的数据状态，重新渲染页面。</li></ol> <p>通俗地说，事件驱动思维是从事件响应出发，来完成应用的设计和编程。</p> <h1 id="数据驱动"><a href="#数据驱动" aria-hidden="true" class="header-anchor">#</a> 数据驱动</h1> <p>数据驱动，将我们从复杂的逻辑设计带进数据处理的世界。</p> <h2 id="何为数据"><a href="#何为数据" aria-hidden="true" class="header-anchor">#</a> 何为数据</h2> <p>数据是什么，官方回答：数据是科学实验、检验、统计等所获得的和用于科学研究、技术设计、查证、决策等的数值。</p> <p>但其实不管是资料中、生活和工作中，所有的事物我们都可以抽象为数据。像游戏里面的角色、物品、经验值、天气、时间等等，都是数据。游戏其实也算是对真实世界抽象的一种，而抽象之后，最终都可呈现为数据。</p> <p>我认为，<strong>数据是一个抽象的过程。</strong></p> <p>回到日常写码中，前端写页面，抽象成数据常用的无非是：</p> <ul><li>列表 =&gt; array</li> <li>状态 =&gt; number/boolen</li> <li>一个卡片 =&gt; object</li> <li>等等</li></ul> <h2 id="事件驱动到数据驱动"><a href="#事件驱动到数据驱动" aria-hidden="true" class="header-anchor">#</a> 事件驱动到数据驱动</h2> <h3 id="数据驱动-vs-事件驱动"><a href="#数据驱动-vs-事件驱动" aria-hidden="true" class="header-anchor">#</a> 数据驱动 vs 事件驱动</h3> <p>要对事件驱动和数据驱动进行直观的比较，大概是以下这样：</p> <h4 id="事件驱动-2"><a href="#事件驱动-2" aria-hidden="true" class="header-anchor">#</a> 事件驱动</h4> <ol><li>构建页面：设计 DOM =&gt; 生成 DOM =&gt; 绑定事件</li> <li>监听事件：操作 UI =&gt; 触发事件 =&gt; 响应处理 =&gt; 更新 UI</li></ol> <h4 id="数据驱动-2"><a href="#数据驱动-2" aria-hidden="true" class="header-anchor">#</a> 数据驱动</h4> <ol><li>构建页面：设计数据结构 =&gt; 事件绑定逻辑 =&gt; 生成 DOM</li> <li>监听事件：操作 UI =&gt; 触发事件 =&gt; 响应处理 =&gt; 更新数据 =&gt; 更新 UI</li></ol> <p>其实最大的转变是，以前会把组件视为 DOM，把事件/逻辑处理视为 Javascript，把样式视为 CSS。而当转换思维方式之后，组件、事件、逻辑处理、样式都是一份数据，我们只需要把数据的状态和转换设计好，剩下的实现则由具现方式（模版引擎、事件机制等）来实现。</p> <h3 id="数据驱动思维"><a href="#数据驱动思维" aria-hidden="true" class="header-anchor">#</a> 数据驱动思维</h3> <p>转换到数据驱动思维后，我们在编程实现的过程中，更多的是思考数据的维护和处理，而无需过于考虑 UI 的变化和事件的监听。</p> <p>拿一个企业网站来说，里面的很多数据和链接，从前我们常用方式是直接写成 DOM，然后就产生了很长的一段 DOM 代码。</p> <p>如果说我们将其切换到数据，以对象和数组的方式存储，这时候我们只需要写一段具现方式，将这组数据转成 DOM。这种方式有以下好处：</p> <ul><li>数据变更方便</li> <li>DOM 结构变轻</li> <li>DOM 结构/样式调整方便</li> <li>抽象设计</li> <li>代码量减少，易于维护</li></ul> <h2 id="数据驱动与-mvvm"><a href="#数据驱动与-mvvm" aria-hidden="true" class="header-anchor">#</a> 数据驱动与 mvvm</h2> <p>数据驱动的设计思维或许与 mvvm 没有必然的联系，但是 mvvm 框架提供一些具现方式将数据驱动变得更加轻松。</p> <h3 id="mvvm-集成具现化方法"><a href="#mvvm-集成具现化方法" aria-hidden="true" class="header-anchor">#</a> mvvm 集成具现化方法</h3> <p>拿 vue 框架来说，有以下一些很方便的具现方法：</p> <ul><li>模板渲染：数据 =&gt; AST =&gt; 生成 DOM</li> <li>数据绑定：交互输入/http 请求响应/定时器触发 =&gt; 事件监听 =&gt; 数据变更 =&gt; diff =&gt; DOM 更新</li> <li>路由引擎：url =&gt; 数据(host/path/params 等) =&gt; 解析对应页面</li></ul> <p>当我们使用了这些 mvvm 框架时，它们解决了如何让数据转变成需要的东西，将抽象具象化的问题。在这样的情况下，我们只需要完成两步：</p> <ol><li>将产品/业务/设计抽象化，将 UI、交互抽象为数据。</li> <li>将一组组的数据用逻辑处理连接起来。</li></ol> <h3 id="mvvm-推动数据驱动思维"><a href="#mvvm-推动数据驱动思维" aria-hidden="true" class="header-anchor">#</a> mvvm 推动数据驱动思维</h3> <p>这里借用 vue，来举两个例子吧。</p> <p>一、获取 input 输入并更新
实现一个 input 的监听输入，并更新输出到模板，我们能有以下代码的变化：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--1. 事件驱动--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>p<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> val <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#p&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--2. 数据驱动 + vue--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>inputValue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ inputValue }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>当我们在 vue 中，模板引擎帮我们处理了模板渲染、数据绑定的过程，我们只需要知道这里面只有一个有效数据，即 input 的值。</p> <p>二、部分更新列表
我们再来看个例子，我们有一组数据，需要渲染成一个列表：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">&quot;name1&quot;</span><span class="token punctuation">,</span> href<span class="token punctuation">:</span> <span class="token string">&quot;http://href1&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">&quot;name2&quot;</span><span class="token punctuation">,</span> href<span class="token punctuation">:</span> <span class="token string">&quot;http://href2&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">&quot;name3&quot;</span><span class="token punctuation">,</span> href<span class="token punctuation">:</span> <span class="token string">&quot;http://href3&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">&quot;name4&quot;</span><span class="token punctuation">,</span> href<span class="token punctuation">:</span> <span class="token string">&quot;http://href4&quot;</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><ol><li>当我们需要渲染成列表时：</li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--1). 事件驱动--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>ul<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">const</span> dom <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#ul&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    dom<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>
      <span class="token template-string"><span class="token string">`&lt;li data-id=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;&gt;&lt;span&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/span&gt;: &lt;a href=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>
        item<span class="token punctuation">.</span>href
      <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>href<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/a&gt;&lt;/li&gt;`</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--2). 数据驱动 + vue--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item.href<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.href}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="2"><li>当我们需要更新一个列表中某个 id 的其中一个数据时（这里需要更改 id 为 3 的 name 值）：</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 1). 事件驱动</span>
<span class="token keyword">const</span> dom <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#ul&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
dom<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`li[data-id=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;] span`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">&quot;newName3&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 2). 数据驱动 + vue</span>
<span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
list<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>id <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span>name <span class="token operator">==</span> <span class="token string">&quot;newName3&quot;</span><span class="token punctuation">;</span>
</code></pre></div><p>当然这里我们已知<code>list</code>里面有<code>id</code>为 3 的值，若是未知或不确定的数据，则需要做好异常处理，如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> item3 <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>id <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>item3<span class="token punctuation">)</span> item3<span class="token punctuation">.</span>name <span class="token operator">==</span> <span class="token string">&quot;newName3&quot;</span><span class="token punctuation">;</span>
</code></pre></div><p>在使用数据驱动的时候，模板渲染的事情会交给框架去完成，我们需要做的就是数据处理而已。</p> <h1 id="结束语"><a href="#结束语" aria-hidden="true" class="header-anchor">#</a> 结束语</h1> <p>思维的切换和视角的转变，是一件很有意思的事情。从更多的角度去观察，去思考，去总结，才能更好地理解被观察体。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-basic/understanding/data-driven-or-event-driven.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-basic/understanding/dialogue-abstraction.html" class="prev">
          对话抽象
        </a></span> <!----></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-7497" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty0.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/43.0137d03c.js" defer></script>
  </body>
</html>
